<!DOCTYPE html>
<html>
  <head>
	<title>HolyBible</title>
	{% include "common/common_head.html" %}
	<script type="text/javascript">
	  function toggleFunctionMenu() {
	    $("#functionMenu").toggle("fast");
	  }
	  function changeVersion(obj) {
	    var idx = obj.selectedIndex;
	    if (idx == 0) {
	      return;
	    }
	    var url = "/read?bcode={{ book.bcode }}&bname={{ book.name }}&cnum={{ cnum }}";
	    var version_str = "&vcode=" + obj[idx].value + "&vname=" + obj[idx].text;
	    document.location.href = url + version_str;
	    return;
	  }
	</script>
  </head>
  <body>
	<div class="header">
	  <h1><a href="/" title="Holy Bible">Holy Bible</a></h1>
	  <p class="history">
		<a href="/books?vcode={{ version.code }}&vname={{ version.name }}" title="Read {{ version.name }}">{{ version.name }}</a>
		<a href="/chapters?vcode={{ version.code }}&vname={{ version.name }}&bcode={{ book.code }}&bname={{ book.name }}" title="">{{ book.name }}</a>
		<a href="/read?vcode={{ version.code }}&vname={{ version.name }}&bcode={{ book.code }}&bname={{ book.name }}&cnum={{ cnum }}" title="Read {{ version.name}} {{ book.name }} Chapter {{ cnum }}">{{ cnum }}</a>
	  </p>

	  <div class="function">
		<button id="btnFunction" class="btn_function" onclick="toggleFunctionMenu();"><img src="/img/btn_dropdown.png" alt="drop down menu" /></button>
		<ul id="functionMenu" class="function_menu" style="display:none;">
		  {% ifnotequal cnum 1 %}
		  <li class="btn"><a href="/read?vcode={{ version.vcode }}&vname={{ version.name }}&bcode={{ book.bcode }}&bname={{ book.name }}&cnum={{ cnum|add:"-1" }}">Prev</a></li>
		  {% endifnotequal %}
		  {% ifnotequal cnum maxCnum %}
		  <li class="btn"><a href="/read?vcode={{ version.vcode }}&vname={{ version.name }}&bcode={{ book.bcode }}&bname={{ book.name }}&cnum={{ cnum|add:"+1" }}">Next</a></li>
		  {% endifnotequal %}

		  <li class="bottom">
			<select onchange="changeVersion(this);">
			  <option value="">Select Version</option>
			  {% for vitem in versions %}
			  <option value="{{ vitem.vcode }}">{{ vitem.name }}</option>
			  {% endfor %}
			</select>
		  </li>
		</ul>
	  </div>
	</div>
	<div class="body">
	  <ol class="text">
		{% for verse in verses %}
		<li>{{ verse }}</li>
		{% endfor %}
	  </ol>
	</div>
	<div class="footer">
	  <p class="page">
		{% ifnotequal cnum 1 %}
		<a href="/read?vcode={{ version.vcode }}&vname={{ version.name }}&bcode={{ book.bcode }}&bname={{ book.name }}&cnum={{ cnum|add:"-1" }}">Prev</a>
		{% endifnotequal %}
		{% ifnotequal cnum maxCnum %}
		<a href="/read?vcode={{ version.vcode }}&vname={{ version.name }}&bcode={{ book.bcode }}&bname={{ book.name }}&cnum={{ cnum|add:"+1" }}">Next</a>
		{% endifnotequal %}
	  </p>
	{% include "common/copyright.html" %}
	</div>
  </body>
</html>
